<template>
  <div class="customer-manage">
    <el-form :inline="true" size="mini" style="margin-left: 10px" class="search-form">
      <el-form-item label="公司名">
        <el-input v-model="search.companyName"></el-input>
      </el-form-item>
      <el-form-item label="税号">
        <el-input v-model="search.taxId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="showAddDialog=true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table size="mini" :data="customerList" style="width: 100%" :height="getTableHeight()">
      <el-table-column prop="name" label="公司名"></el-table-column>
      <el-table-column prop="taxCode" label="税号"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column>
        <template slot="header">
          <span>操作</span>
        </template>
        <template slot-scope="scope">
          <a class="t-link" @click="deleteCustomer(scope.row.taxCode)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <el-dialog title="新增客户" :visible.async="showAddDialog" :show-close="false">
      <el-form ref="customerForm" :model="customerForm">
        <el-form-item prop="name" label="公司名" :rules="[{required:true,message:'公司名不能为空'}]">
          <el-input type="name" placeholder="请输入" v-model="customerForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="taxCode" label="税号" :rules="[{required:true,message:'税号不能为空'}]">
          <el-input type="taxCode" placeholder="请输入" v-model="customerForm.taxCode"></el-input>
        </el-form-item>
        <el-form-item prop="telephone" label="税号">
          <el-input type="telephone" placeholder="请输入" v-model="customerForm.telephone"></el-input>
        </el-form-item>
        <el-form-item prop="address" label="公司地址">
          <el-input placeholder="请输入" type="address" v-model="customerForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addCustomer()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as customerApi from "@/api/customer_manage";
import { SUCCESS_CODE } from "@/config/config";
export default {
  name: "customer-manage",
  data: function() {
    return {
      showAddDialog: false,
      customerList: [],
      customerForm: {
        name: "",
        address: "",
        taxCode: "",
        telephone: ""
      },
      search: {
        companyName: "",
        taxId: ""
      },
      pagination: {
        limit: 15, // 每页数据大小
        pageNum: 1, // 当前页数
        total: 0 // 全部数据条数
      }
    };
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.pagination.pageNum = currentPage;
      this.getCustomerList();
    },
    handleSizeChange(size) {
      this.pagination.limit = size;
      this.getCustomerList();
    },
    /**
     * 获取客户列表
     */
    getCustomerList() {
      customerApi.getCustomerList(this.pagination).then(resp => {
        let result = resp.data;
        if (result.status === SUCCESS_CODE) {
          this.pagination.total = result.data.total;
          this.customerList = result.data.results;
        }
      });
    },
    /**
     * 根据纳税识别号（taxId）删除客户
     */
    deleteCustomer(taxId) {
      this.$swal
        .fire({
          allowOutsideClick: false,
          type: "info",
          title: "你确定要删除该条数据吗？"
        })
        .then(yes => {
          if (yes) {
            customerApi.deleteByTaxId(taxId).then(resp => {
              let result = resp.data;
              this.handleOpSuccess(result);
              this.getCustomerList();
            });
          }
        });
    },
    /**
     * 添加客户
     */
    addCustomer() {
      this.$refs["customerForm"].validate(valid => {
        if (valid) {
          customerApi
            .newCustomer({ info: JSON.stringify(this.customerForm) })
            .then(resp => {
              let data = resp.data;
              this.showAddDialog = false;
              this.handleOpSuccess(data);
              this.getCustomerList();
            });
        }
      });
    }
  },
  created() {
    this.getCustomerList();
  }
};
</script>

<style scoped>
</style>
